<template>
  <div>
    <el-card class="box-card" style="margin: 15px;">
    <el-button type="warning" plain icon="el-icon-plus">新增一级类目</el-button>
    <el-table
    :data="catedata"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="name"
      label="类别名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cate_level"
      label="所属级别"
      width="180">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.level === 1 ? 'success' : scope.row.category === 2?'primary':'warning'"
          disable-transitions>{{scope.row.level === 1 ? '一级' : scope.row.category === 2?'二级':'三级'}}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">修改</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-card>
  </div>
</template>

<script>
import { getcategory } from '@/api/index'
export default {
    name:'category',
    data(){
        return {
          catedata:[]
      }
    },
    methods: {
      load(){},
      handleEdit(a,b){
        this.$prompt('请输入新的类名', '修改当前类名', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '修改成功！' 
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    },
    mounted(){
      getcategory().then(res => {
        this.catedata = res.data.data
      }).catch(err => console.log(err))
    }
      
}
</script>

<style>

</style>